import React, {useEffect, useState} from "react";
import {
  Box,
  Button,
  Container,
  CssBaseline,
  Paper,
  Tab, Table, TableBody, TableCell,
  TableContainer, TableHead, TableRow,
  Tabs,
  TextField,
  Typography,
} from "@mui/material";

import RoleCard from "../../component/RoleCard";

import {roles} from "../../roleImage";
import {useNavigate} from "react-router-dom";
import axios from "axios";

const column = [
  {id: 'name', label: '房间名'},
  //{id: 'createTime', label: '创建时间'},
  {id: 'userCount', label: '用户数量'}
]

function Home(){
  const [roleType, setRoleType] = useState('cats');
  const [roleIndex, setRoleIndex] = useState(0);
  const [nickName, setNickName] = useState('匿名');
  const [roomList, setRoomList] = useState([]);
  const [newRoom, setNewRoom] = useState('');

  const navigate = useNavigate()

  function enterChat(room){

    navigate('/chat', {
      state: {
        userInfo:{
          'nickName': nickName,
          'roleType':roleType,
          'roleIndex':roleIndex
        },
        'room':room
      }
    })
  }

  function fetchRoomList(){
    axios.get('/api/rooms')
      .then(resp=>{
        setRoomList(resp.data.list)
      })
    const d = new Date()
  }

  function logout(){
    axios.get('/api/logout')
      .then((res)=>{
        navigate('/login')
      })
  }

  useEffect(() => {fetchRoomList()}, []);

    return(
      <Container component="main" maxWidth={"lg"}>
          <CssBaseline/>
          <Box sx = {{display:'flex', flexDirection:'column', justifyContent: 'center', height:'100vh'}}>
          <Paper elevation={3}>
            <Box sx = {{display:'flex', flexDirection: 'row', justifyContent:'center', alignItems:'stretch'}}>
               {/*角色选择面板*/}
              <Box  sx={{margin: '16px', display: 'flex', flexDirection: 'column', alignItems: 'center',}}>
                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                  <Tabs value={roleType} onChange={(event, newValue) => {setRoleType(newValue)}} aria-label="lab API tabs example">
                    <Tab label="猫猫" value="cats" />
                    <Tab label="狗狗" value="dogs" />
                  </Tabs>
                </Box>
                <Box sx={{margin: '16px'}}>
                  {roles[roleType].map((item, i) => {
                    return (
                      <RoleCard
                        key={i} image={item} isActive={item === roles[roleType][roleIndex]}
                        onClick={()=>{setRoleIndex(i)}}
                      />
                    );
                  })}
                </Box>
              </Box>
              {/*角色信息*/}
              <Box sx={{minWidth:'256px',margin: '8px 8px', display: 'flex','justify-content': 'space-between', flexDirection: 'column', alignItems: 'center',}}>
                <Typography component="h1" variant="h5">
                  你的身份
                </Typography>
                <Box
                  component="img"
                  sx={{
                    height: 200,
                    maxHeight: { xs: 233, md: 167 },
                    maxWidth: { xs: 350, md: 250 },
                  }}
                  alt="role"
                  src={roles[roleType][roleIndex]}
                />
                <Box sx={{alignItems: 'flex-end'}}>
                  <TextField
                    sx={{margin: '16px'}}
                    InputProps={{
                      inputProps: {
                        style: { textAlign: "center" },
                      }
                    }}
                    label="昵称" value={nickName} fullWidth variant="outlined"
                    onChange={(event)=>{
                      setNickName(event.target.value)
                  }}/>
                  <Button onClick={logout}>退出</Button>
                </Box>
              </Box>

              {/*房间列表*/}
              <Box sx={{display:'flex', margin:'16px', flexDirection:'column', justifyContent:'space-between'}}>
                <Box sx={{marginTop:'16px',display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
                  <TextField label="创建房间" onChange={(event)=>{
                    setNewRoom(event.target.value)
                  }}fullWidth variant="outlined"/>
                  <Button
                    sx={{ml:'16px'}}
                    variant="contained"
                    onClick={()=>{enterChat(newRoom)}}
                    >创建</Button>
                  <Button
                    sx={{ml:'16px'}}
                    variant="contained"
                    onClick={()=>{fetchRoomList()}}
                  >刷新</Button>
                </Box>
              <TableContainer sx={{ maxHeight: 480, height: 480}}>
                <Table stickyHeader aria-label="sticky table">
                  <TableHead>
                    <TableRow>
                      {column.map((column) => (
                        <TableCell
                          key={column.id}
                        >
                          {column.label}
                        </TableCell>
                      ))}
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {roomList
                      .map((row) => {
                        return (
                          <TableRow hover={true} onClick={(event)=>{
                            enterChat(row.name)
                          }} role="checkbox" tabIndex={-1}>
                            {column.map((column) => {
                              const value = row[column.id];
                              return (
                                <TableCell key={column.id}>
                                  {value}
                                </TableCell>
                              );
                            })}
                          </TableRow>
                        );
                      })}
                  </TableBody>
                </Table>
              </TableContainer>
              </Box>
            </Box>
          </Paper>
          </Box>
      </Container>
    )
}

export default Home